.ss_tooltip
  position: absolute
  top: var(--top, initial)
  left: var(--left, initial)
  min-width: var(--minwid, initial)
  z-index 3
  &[data-arrow=true]
    &[data-dire=left], &[data-dire='left start']
      .item_tooltip
        &:before
          right: -4px
          top: var(--arrowTop, initial)
          ss-triangle-hollow(left, 6px, $tipsx-bc, $tipsx-bg)
    &[data-dire='left end']
      .item_tooltip
        &:before
          right: -4px
          top: initial
          bottom: var(--arrowTop, initial)
          ss-triangle-hollow(left, 6px, $tipsx-bc, $tipsx-bg)
    &[data-dire=right], &[data-dire='right start']
      .item_tooltip
        &:before
          left: -4px
          top: var(--arrowTop, initial)
          ss-triangle-hollow(right, 6px, $tipsx-bc, $tipsx-bg)
    &[data-dire='right end']
      .item_tooltip
        &:before
          left: -4px
          top: initial
          bottom: var(--arrowTop, initial)
          ss-triangle-hollow(right, 6px, $tipsx-bc, $tipsx-bg)
    &[data-dire=top], &[data-dire='top start']
      .item_tooltip
        &:before
          bottom: -4px
          left: var(--arrowLeft, initial)
          ss-triangle-hollow(bottom, 6px, $tipsx-bc, $tipsx-bg)
    &[data-dire='top end']
      .item_tooltip
        &:before
          bottom: -4px
          left: initial
          right: var(--arrowLeft, initial)
          ss-triangle-hollow(bottom, 6px, $tipsx-bc, $tipsx-bg)
    &[data-dire=bottom], &[data-dire='bottom start']
      .item_tooltip
        &:before
          top: -4px
          left: var(--arrowLeft, 50%)
          ss-triangle-hollow(bottom, 6px, $tipsx-bc, $tipsx-bg, $transform: rotate(135deg))
    &[data-dire='bottom end']
      .item_tooltip
        &:before
          top: -4px
          left: initial
          right: var(--arrowLeft, initial)
          ss-triangle-hollow(bottom, 6px, $tipsx-bc, $tipsx-bg, $transform: rotate(135deg))
  .item_tooltip
    border-radius: $br
    border: 1px solid $color-line-input
    background: #fff
    color: $color-text
    padding: 10px
    position: relative
    &.nopadding
      padding: 0
    &.is-dark
      border-color: $color-primary
      background: $color-primary
      color: #fff
    &:before
      content: ''
      position: absolute
      z-index: $zidx-h + 1
    // &.left
    //   &:before
    //     right: -4px
    //     top: var(--arrowTop, initial)
    //     ss-triangle-hollow(left, 10px, $tipsx-bc, $tipsx-bg)
    //   &.end
    //     &:before
    //       top: initial
    //       bottom: var(--arrowTop, initial)
    // &.right
    //   &:before
    //     left: -6px
    //     top: var(--arrowTop, initial)
    //     ss-triangle-hollow(right, 10px, $tipsx-bc, $tipsx-bg)
    //   &.end
    //     &:before
    //       top: initial
    //       bottom: var(--arrowTop, initial)
    // &.top
    //   &:before
    //     bottom: -6px
    //     left: var(--arrowLeft, initial)
    //     ss-triangle-hollow(bottom, 10px, $tipsx-bc, $tipsx-bg)
    //   &.end
    //     &:before
    //       left: initial
    //       right: var(--arrowLeft, initial)
    // &.bottom
    //   &:before
    //     top: -6px
    //     left: var(--arrowLeft, 50%)
    //     ss-triangle-hollow(bottom, 10px, $tipsx-bc, $tipsx-bg, $transform: rotate(135deg))
    //   &.end
    //     &:before
    //       left: initial
    //       right: var(--arrowLeft, initial)

